<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
		<title>首页</title>
	</head>

	<body>
		<div id="app">
			<div class="top" id="topBar">
				<p>C橙</p>
			</div>
			<div id="container">
				<!-- Swiper -->
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide" v-for="bannerItem in bannerList">
							<img :src="bannerItem.img" />
						</div>

					</div>
					<!-- Add Pagination -->
					<div class="swiper-pagination"></div>
				</div>
				<div class="content inlinkFlex-spacebetween" v-cloak>
					<div v-for="(productItem,productIndex) in productList" class="floorItem">
						<a :href="'pages/category.html?catItem='+productItem.Category.TopNum">
							<div class="productTop inlinkFlex-spacebetween">
								<p class="productTop-text">{{productItem.Category.TopText}}</p>
								<div class="inlinkFlex">
									<p class="productTop-text">{{productIndex+1}}F</p>
									<img src="img/icon/arrowRight.png" />
								</div>
							</div>
						</a>
						<div class="productBox inlinkFlex-spacebetween" v-cloak>
							<div class="productItem inlinkFlex" v-for="goodsItem in productItem.SalesProduct">
								<div class="itemBox">
									<a href="pages/detail.html">
										<img v-lazy="goodsItem.GoodsImage" class="itemImg" />
										<div class="itemText">
											<p class="text-ellipsis">{{goodsItem.GoodsName}}</p>
											<p class="itemIntro text-ellipsis">{{goodsItem.GoodsInfo}}</p>
											<p><span class="shopCoach">¥ {{goodsItem.GoodsPrice}}</span></p>
										</div>
									</a>

									<div class="addCartBox">
										<img src="img/icon/shop_addCart.png" @click="onAddCart(goodsItem.GoodsName)" v-show="!goodsItem.shopAddCart" />
										<img src="img/icon/shop_addCart_select.png" @click="onAddCart(goodsItem.GoodsName)" v-show="goodsItem.shopAddCart" />
									</div>

								</div>

							</div>
						</div>
					</div>

				</div>
				<div class="footerTip">
					————————别滑了，已经到底了———————
				</div>
			</div>
			#include("./pages/common/footer.html")
			<!--提示成功弹窗-->
			<div class="model" v-show="successModel" v-cloak>
				<div class="model-content tip-content">
					<p>{{goodsName}} 添加成功</p>
					<p @click="successModel=false">确定</p>
				</div>
			</div>
		</div>

	</body>

</html>
